const { ModuleFederationPlugin } = require('webpack').container
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const WebpackBar = require('webpackbar')
const deps = require('./package.json').dependencies;
const path = require('path')
function loader(loader, options) {
  return [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
    },
    loader ? {
      loader
    } : null
  ].filter(Boolean)
}
module.exports = {
  mode: 'development',
  entry: "./src/main.js",
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '../dist')
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: false,
    port: 8081,
    client: {
      logging: 'warn',
      overlay: false,
      progress: true,
    },
    proxy: { // 配置代理（只在本地开发有效，上线无效）
      "/x": { // 这是请求接口中要替换的标识
        target: "https://api.bilibili.com", // 被替换的目标地址，即把 /api 替换成这个
        pathRewrite: { "^/api": "" },
        secure: false, // 若代理的地址是https协议，需要配置这个属性
      },
      '/v1': {
        target: 'http://101.34.16.58', // 这是本地用node写的一个服务，用webpack-dev-server起的服务默认端口是8080
        changeOrigin: true, // 加了这个属性，那后端收到的请求头中的host是目标地址 target
      },
    }
  },
  module: {
    rules: [
      {
        test: /bootstrap.js$/,
        use: [
          {
            loader: 'bundle-loader',
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,

        use: [
          {
            loader: 'babel-loader',
            options: {
              configFile: path.join(__dirname, '.babelrc')
            }
          }
        ]
      },
      
      
      {
        test: /\.(css)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
          }
        ],

      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
          }
        ]
      },
      // {
      //   test: /\.(png|jpg|jpeg|svg|txt)$/,
      //   use: 'file-loader'
      // }
    ],
  },
  plugins: [
    new WebpackBar({
      profile: false, // 不显示打包信息
      name: 'Fuck Zhou',
      color: 'pink',
      basic: false
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new ModuleFederationPlugin({
      name: 'basic',
      shared: {
        react: {
          singleton: true,
        },
        'react-dom': {
          requiredVersion: deps['react-dom'],
        },
      },
      exposes: {
        App: './src/App'
      }
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: "public", to: path.join(__dirname, '../dist/'), filter(file) { return !file.endsWith('.html') } },
      ],
    })
  ]
}